<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="销售订单编码">
                <el-input v-model="orderNo" placeholder="请输入销售订单编码"></el-input>
            </el-form-item>
            
            <el-form-item label="订单名称">
                <el-input v-model="orderName" placeholder="请输入订单名称"></el-input>
            </el-form-item>    
            <el-form-item label="客户编码">
                <el-input v-model="customercode" placeholder="请输入客户编码"></el-input>
            </el-form-item>
            <el-form-item label="客户名称">
                <el-input v-model="customername" placeholder="请输入客户名称"></el-input>
            </el-form-item>
       
            <el-form-item label="产品编码">
                <el-input v-model="productcode" placeholder="请输入产品编码"></el-input>
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input v-model="productname" placeholder="请输入产品名称"></el-input>
            </el-form-item>
            <el-form-item label="客户产品名称">
                <el-input v-model=" customerproductname" placeholder="请输入客户产品名称"></el-input>
            </el-form-item>

            
            <el-form-item label="材质">
                <el-input v-model="followUp" placeholder="请输入跟单"></el-input>
            </el-form-item>
            
            <el-form-item label="颜色">
             <el-select v-model="color">
                <el-option label="红色" value="red"></el-option>
                <el-option label="蓝色" value="blue"></el-option>
                <el-option label="绿色" value="green"></el-option>
            </el-select>

            </el-form-item>
            
          
            <el-form-item label="交货日期">
                <el-date-picker v-model="deliveryDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-button type="primary" @click="search" style="margin-bottom: 20px;"><el-icon style="margin-right: 10px;"><Search /></el-icon>搜索</el-button>
        </el-form>

        <el-button type="primary" v-perm:management:salelist:insert="insert">添加</el-button>
        <el-button type="primary" v-perm:management:salelist:update="insert">修改</el-button>
        <el-button type="primary" v-perm:management:salelist:remove="insert">删除</el-button>
        <el-button type="primary" @click="bulkDelete" :disabled="selectedRows.length === 0">批量删除</el-button>

        <el-table :data="salesorder" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="detailNo" label="明细编码" width="120"></el-table-column>
            <el-table-column prop="orderNo" label="订单编码" width="120"></el-table-column>
            <el-table-column prop="customercode" label="客户编码" width="120"></el-table-column>
            <el-table-column prop="orderDate" label="订货日期" width="120"></el-table-column>
            <el-table-column prop="orderStatus" label="状态" width="120"></el-table-column>
            <el-table-column prop="customername" label="客户名称" width="120"></el-table-column>
            <el-table-column prop="productcode" label="产品编码" width="120"></el-table-column> 
            <el-table-column prop="productname" label="产品名称" width="120"></el-table-column>
            <el-table-column prop="Productspecs" label="产品规格" width="120"></el-table-column>
            <el-table-column prop="material" label="材质" width="120"></el-table-column>
            <el-table-column prop="colorcode" label="色号" width="120"></el-table-column>
            <el-table-column prop="color" label="颜色" width="120"></el-table-column>
            <el-table-column prop="unit" label="单位" width="120"></el-table-column>
            <el-table-column prop="deliveryDate" label="交货日期" width="120"></el-table-column>
            <el-table-column prop="customerproductname" label="客户产品名称" width="120"></el-table-column>
            <el-table-column prop="quantity" label="订货数量" width="120"></el-table-column>
            <el-table-column prop="unitprice" label="库存数量" width="120"></el-table-column>
            <el-table-column prop="deliveredquantity" label="已出货数" width="120"></el-table-column>
            <el-table-column prop="Returnedquantity" label="已退货数" width="120"></el-table-column>
            <el-table-column prop="balancequantity" label="欠数" width="120"></el-table-column>
            <el-table-column prop="manualcancellation" label="手工消数" width="120"></el-table-column>
            <el-table-column prop="remark" label="备注" width="120"></el-table-column>
            <el-table-column prop="id" label="id" width="120"></el-table-column>
            <el-table-column prop="Creator" label="创建者" width="120"></el-table-column>
            <el-table-column prop="CreationTime" label="创建时间" width="120"></el-table-column>
            <el-table-column prop="Modifier" label="修改者" width="120"></el-table-column>
           
            <el-table-column label="操作" width="200px">
                <template #default="scope">
                    <el-button :row="scope.row" type="primary" v-perm:management:salesorder:update="update">修改</el-button>
                    <el-button type="danger" size="mini" :row="scope.row" v-perm:management:salesorder:remove="remove">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <el-dialog :destroy-on-close="true"
            :title="title"
            v-model="visible">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>
        
    </div>
</template>

<script setup>
import { ref } from 'vue'

let data = ref({})
let visible = ref(false)
let title = ref('')

const insert = () => {
    visible.value = true
    title.value = '添加订单'
}
const update = (row) => {   
    visible.value = true
    title.value = '修改订单'
    data.value = row
}

// 初始化状态（设置默认值）
const orderNo= ref('')
const orderName= ref('')
const customercode= ref('')
const customername= ref('')
const productcode= ref('')
const productname= ref('')  
const customerproductname= ref('')
const followUp= ref('')
const color= ref('')
const deliveryDate= ref('')









// 示例订单数据
let salesorder = ref([
    {  
         detailNo: "123456",
         orderNo: "123456",
         customercode: "123456",
         orderDate: "2021-01-01",
         orderStatus: "已完成",
         customername: "sb",
         productcode: "123456",
        productname: "小妹硅胶",
         Productspecs: "无",
        material: "硅胶",
         colorcode: "123456",
         color: "红色",
         unit: "个",
         deliveryDate: "2021-01-01",
         customerproductname: "小妹硅胶",
         quantity: "100",
         unitprice: "100",
         deliveredquantity: "100",
         Returnedquantity: "0",
         balancequantity: "0",
         manualcancellation: "0",
         remark: "无",
         id: "123456",
         Creator: "admin",
         CreationTime: "2021-01-01",
         Modifier: "admin"
        
    },
    {
        
        detailNo: "333",
         orderNo: "333",
         customercode: "333",
         orderDate: "2021-01-01",
         orderStatus: "已完成",
         customername: "vw五菱",
         productcode: "333",
        productname: "棋盘",
         Productspecs: "无",
        material: "棋盘",
         colorcode: "333",
         color: "黑色",
         unit: "个",
         deliveryDate: "2021-01-01",
         customerproductname: "棋盘",
         quantity: "10",
         unitprice: "10",
         deliveredquantity: "10",
         Returnedquantity: "0",
         balancequantity: "0",
         manualcancellation: "0",
         remark: "无",
         id: "333",
         Creator: "admin",
         CreationTime: "2021-01-01",
         Modifier: "admin"
    }
]);

let selectedRows = ref([]);

const handleSelectionChange = (val) => {
    selectedRows.value = val;
};

const bulkDelete = () => {
    // 批量删除逻辑，这里可以根据 selectedRows 进行处理
    console.log('要删除的订单:', selectedRows.value);
};
</script>

<style  scoped>
/* 样式部分，可以根据需求添加 */
.el-select {
    width: 150px;
}
</style>
